<template>
  <div class="app-container">
    <div class="nav-search">
      <el-date-picker
        v-model="searchParams.createTime"
        :clearable="false"
        type="date"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        placeholder="创建日期"
        clear-icon
      >
      </el-date-picker>
      <el-input v-model="searchParams.bomName" placeholder="物料名称"></el-input>
      <span>
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
        <el-button class="filter-item" size="mini" type="warning" icon="el-icon-download" @click="exportType">导出</el-button>
      </span>
      <div class="tableHandle">
        <el-button class="filter-item" size="mini" type="warning" @click="delMaterial">删除</el-button>
        <el-button class="filter-item" size="mini" type="success" @click="addInventory">增加库存</el-button>
        <el-button class="filter-item" size="mini" type="success" @click="addMaterial">新增物料</el-button>
      </div>
    </div>
    <div class="tableList">
      <el-table
        ref="table"
        v-loading="loading"
        stripe
        :data="data"
        size="small"
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="bomName" label="物料名称" min-width="180"></el-table-column>
        <el-table-column prop="remaining" label="库存数量" min-width="100"></el-table-column>
        <el-table-column prop="grandTotal" label="累计用量" min-width="100"></el-table-column>
        <el-table-column prop="stat" label="状态" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.stat == 1 ? "启用" : "停用" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="单位" min-width="60"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" min-width="120">
          <template slot-scope="scope">
            {{ parseTime(scope.row.createDate, '{y}-{m}-{d}') }}
          </template>
        </el-table-column>
        <el-table-column prop="intro" label="物料介绍" min-width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="bomId" label="操作" min-width="250">
          <template slot-scope="scope">
            <el-popover
              placement="left"
              width="300"
              trigger="click"
              :value="isShow"
              @show="isShow = true"
              @hide="addCount = null"
            >
              <div>
                <el-input v-model="addCount" placeholder="请输入增加的数量" style="display: inline-block;width:200px;margin-right:10px" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                <el-button type="primary" size="mini" @click="addRepertory(scope.$index, scope.row)">确定</el-button>
              </div>
              <el-button slot="reference" size="mini" type="success">加库存</el-button>
            </el-popover>
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button v-if="scope.row.stat" size="mini" type="danger" @click="handleStop(scope.$index, scope.row)">停用</el-button>
            <el-button v-else size="mini" type="success" @click="handleStop(scope.$index, scope.row)">启用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        background
        :page-size.sync="page.size"
        :total="total"
        :current-page.sync="page.page"
        style="margin-top: 8px; text-align: right;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChangeHandler($event)"
        @current-change="pageChangeHandler"
      ></el-pagination>
    </div>
    <amend-material ref="material" @addBomSuccess="addBomSuccess"></amend-material>
    <add-inventory ref="inventory" @addBomSuccess="addBomSuccess"></add-inventory>
  </div>
</template>
<script>
import { queryPage, download, deleteBom, statBom, addRemaining } from '@/api/bom';
import { parseTime } from '@/utils/index';
import amendMaterial from '@/views/material/collocation/amendMaterial';
import addInventory from '@/views/material/collocation/addInventory';
export default {
  name: 'OperateCollocation',
  components: {
    amendMaterial,
    addInventory
  },
  data() {
    return {
      loading: false,
      searchParams: {
        packageName: null, // 物料名称
        createTime: null // 创建时间
      },
      ids: [], // 删除物料id
      data: [],
      page: {
        size: 10,
        page: 1
      },
      total: 0,
      addCount: null, // 行内增加库存数量
      isShow: false // 行内增加库存
    };
  },
  computed: {},
  mounted() {
    this.queryLogList({ page: 0, size: 10 });
  },
  methods: {
    parseTime,
    // 搜索
    toQuery() {
      const search = {
        page: this.page.page - 1,
        size: this.page.size,
        ...this.searchParams
      };
      if (search.createTime) {
        const time = search.createTime ? new Date(search.createTime) : new Date();
        search.createTime = time.format('yyyy-MM-dd 00:00:00');
      }
      this.isShow = false;
      this.queryLogList(search);
    },
    // 新增物料
    addMaterial() {
      this.$refs.material.isShow();
    },
    // 编辑物料
    handleEdit(index, row) {
      this.$refs.material.isShow(row, true);
    },
    // 新增物料成功
    addBomSuccess() {
      this.page.page = 1;
      this.page.size = 10;
      this.toQuery();
    },
    // 新增库存
    addInventory() {
      this.$refs.inventory.isShow();
    },
    // 增加库存
    addRepertory(index, row) {
      const dtos = [
        { bomId: row.bomId, addCount: this.addCount }
      ];
      addRemaining(dtos).then(res => {
        this.isShow = false;
        this.$notify.success('库存增加成功');
        this.addBomSuccess();
      }).catch(er => {
        this.isShow = false;
      });
    },
    // 列表select
    handleSelectionChange(val) {
      this.ids = val.map(item => item.bomId);
    },
    // 删除
    delMaterial() {
      if (!this.ids.length) {
        return this.$notify.warning('请至少选择一个你需要删除的物料');
      }
      this.$confirm('请确认删除此物料?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteBom(this.ids).then(res => {
          this.$notify.success(`删除成功`);
          this.addBomSuccess();
        }).catch(er => {});
      });
    },
    // 导出数据
    exportType() {
      const params = {
        ...this.searchParams
      };
      if (params.createTime) {
        const time = params.createTime ? new Date(params.createTime) : new Date();
        params.createTime = time.format('yyyy-MM-dd 00:00:00');
      }
      download(params).then(res => {
        const url = window.URL.createObjectURL(res);
        var a = document.createElement('a');
        document.body.appendChild(a);
        a.href = url;
        a.download = '物料配置.xlsx';
        a.click();
        window.URL.revokeObjectURL(url);
      }).catch(er => {});
    },
    // 停用套餐
    handleStop(index, row) {
      const params = {
        bomId: row.bomId,
        stat: !row.stat
      };
      this.$confirm('此操作将停用, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        statBom(params).then(res => {
          this.$notify.success(`${Number(params.stat) === 1 ? '启用用成功' : '停用成功'}`);
          this.addBomSuccess();
        }).catch(er => {});
      });
    },
    sizeChangeHandler(item) {
      this.toQuery();
    },
    pageChangeHandler(item) {
      this.toQuery();
    },
    // 列表
    queryLogList(params) {
      this.loading = true;
      queryPage(params).then(res => {
        this.data = res.content || [];
        this.total = parseInt(res.totalElements) || 0;
        this.loading = false;
      }).catch(er => {
        this.loading = false;
      });
    }
  }
};
</script>
<style scoped lang='scss'>
.nav-search{
  padding: 10px 0;
  .el-input{
    width: 180px;
    margin-right: 10px;
  }
  .el-date-editor{
    width: 150px;
  }
}
.tableHandle {
  float: right;
  margin: 0;
  padding: 0;
  margin-top: 4px;
}
</style>
